<template>
	<view class="container">
		<view class="header">
			<view class="user-info">
				<image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
				<view class="info">
					<text class="name">{{userInfo.nickname || '医生'}}</text>
					<text class="role">医护人员</text>
				</view>
			</view>
			<view class="notice-btn" @click="goToNotice">
				<u-icon name="bell" size="48" color="#fff"></u-icon>
				<view class="badge" v-if="unreadCount > 0">{{unreadCount > 99 ? '99+' : unreadCount}}</view>
			</view>
		</view>
		
		<!-- 调试信息 -->
		<view class="debug-info">
			<text>当前角色: {{currentRole}}</text>
		</view>
		
		<view class="data-cards">
			<view class="card">
				<view class="card-title">今日咨询</view>
				<view class="card-value">{{todayConsult}}</view>
				<view class="card-desc">较昨日 {{todayConsultDiff > 0 ? '+' + todayConsultDiff : todayConsultDiff}}</view>
			</view>
			<view class="card">
				<view class="card-title">今日就诊</view>
				<view class="card-value">{{todayVisit}}</view>
				<view class="card-desc">较昨日 {{todayVisitDiff > 0 ? '+' + todayVisitDiff : todayVisitDiff}}</view>
			</view>
			<view class="card">
				<view class="card-title">满意度</view>
				<view class="card-value">{{satisfaction}}%</view>
				<view class="card-desc">{{satisfactionTrend}}</view>
			</view>
		</view>
		
		<view class="section-title">
			<text>待处理任务</text>
			<text class="more" @click="goToTasks">更多</text>
		</view>
		
		<view class="task-list">
			<view class="task-item" v-for="(item, index) in tasks" :key="index" @click="handleTask(item)">
				<view class="task-info">
					<view class="task-title">
						<text class="tag" :style="{backgroundColor: getTagColor(item.type)}">{{item.typeText}}</text>
						<text>{{item.title}}</text>
					</view>
					<view class="task-desc">{{item.patientName}} | {{item.date}}</view>
				</view>
				<u-icon name="arrow-right" color="#999"></u-icon>
			</view>
		</view>
		
		<view class="section-title">
			<text>快捷功能</text>
		</view>
		
		<view class="grid-menu">
			<view class="grid-item" v-for="(item, index) in menuItems" :key="index" @click="navigate(item.url)">
				<view class="grid-icon" :style="{backgroundColor: item.bgColor}">
					<u-icon :name="item.icon" size="48" color="#fff"></u-icon>
				</view>
				<text class="grid-text">{{item.name}}</text>
			</view>
		</view>
		
		<view class="section-title">
			<text>患者统计</text>
			<text class="more" @click="goToStats">详情</text>
		</view>
		
		<view class="stats-card">
			<view class="stats-header">
				<text>过去7天患者咨询趋势</text>
			</view>
			<view class="chart-container" style="height: 300rpx;">
				<!-- 此处应该放置图表组件 -->
				<view class="mock-chart">图表区域 - 实际开发时替换为echarts等图表组件</view>
			</view>
		</view>
		
		<!-- 底部安全区域 -->
		<view class="safe-area-bottom"></view>
		
		<!-- 自定义tabBar -->
		<custom-tabbar v-if="showCustomTabBar"></custom-tabbar>
	</view>
</template>

<script>
	// import tabBarMixin from '@/common/mixins/tab-bar-mixin.js';
	
	export default {
		// mixins: [tabBarMixin],
		data() {
			return {
				showCustomTabBar: true,
				userInfo: {},
				currentRole: '', // 当前角色
				unreadCount: 5,
				todayConsult: 12,
				todayConsultDiff: 3,
				todayVisit: 8,
				todayVisitDiff: -2,
				satisfaction: 96,
				satisfactionTrend: '稳定上升',
				tasks: [
					{
						type: 'consult',
						typeText: '咨询',
						title: '脑梗塞患者就医咨询',
						patientName: '张三',
						date: '10:30',
						id: '1001'
					},
					{
						type: 'followup',
						typeText: '随访',
						title: '术后随访提醒',
						patientName: '李四',
						date: '今天',
						id: '1002'
					},
					{
						type: 'report',
						typeText: '报告',
						title: '风险评估报告审核',
						patientName: '王五',
						date: '昨天',
						id: '1003'
					}
				],
				menuItems: [
					{
						name: '患者管理',
						icon: 'account',
						url: '/pages/doctor/patients',
						bgColor: '#3c9cff'
					},
					{
						name: '随访计划',
						icon: 'calendar',
						url: '/pages/doctor/followup',
						bgColor: '#19be6b'
					},
					{
						name: '会诊安排',
						icon: 'calendar-fill',
						url: '/pages/doctor/consultation',
						bgColor: '#ff9900'
					},
					{
						name: '数据统计',
						icon: 'equalizer',
						url: '/pages/doctor/statistics',
						bgColor: '#8799a3'
					}
				]
			}
		},
		onLoad() {
			this.getUserInfo();
			  uni.$on('page-show', () => {
			    if (!this.shouldUpdate) return;
			    this.updateTabBar();
			  });
		},
		mounted() {
			// 强制设置角色为doctor
			const app = getApp();
			if (app && app.globalData) {
				app.globalData.userRole = 'doctor';
				this.currentRole = app.globalData.userRole;
			}
			
			// 通知tabBar更新
/* 			setTimeout(() => {
				uni.$emit('update-tabbar');
			}, 300); */
		},
		methods: {
			getUserInfo() {
				const userInfoStr = uni.getStorageSync('userInfo');
				if (userInfoStr) {
					this.userInfo = JSON.parse(userInfoStr);
					this.currentRole = this.userInfo.role || '';
				}
			},
			goToNotice() {
				uni.navigateTo({
					url: '/pages/doctor/notice'
				});
			},
			goToTasks() {
				uni.navigateTo({
					url: '/pages/doctor/tasks'
				});
			},
			handleTask(task) {
				switch(task.type) {
					case 'consult':
						uni.navigateTo({
							url: `/pages/consultation/chat?id=${task.id}`
						});
						break;
					case 'followup':
						uni.navigateTo({
							url: `/pages/doctor/followup-detail?id=${task.id}`
						});
						break;
					case 'report':
						uni.navigateTo({
							url: `/pages/doctor/report-detail?id=${task.id}`
						});
						break;
					default:
						break;
				}
			},
			getTagColor(type) {
				const colors = {
					consult: '#3c9cff',
					followup: '#19be6b',
					report: '#ff9900'
				};
				return colors[type] || '#909399';
			},
			navigate(url) {
				uni.navigateTo({
					url
				});
			},
			goToStats() {
				uni.navigateTo({
					url: '/pages/doctor/statistics'
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 30rpx;
	}
	
	.header {
		background-color: #3c9cff;
		height: 260rpx;
		padding: 0 30rpx;
		padding-top: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		
		.user-info {
			display: flex;
			align-items: center;
			
			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				border: 4rpx solid rgba(255,255,255,0.4);
			}
			
			.info {
				margin-left: 20rpx;
				
				.name {
					font-size: 36rpx;
					font-weight: bold;
					color: #fff;
					margin-bottom: 10rpx;
				}
				
				.role {
					font-size: 24rpx;
					color: rgba(255,255,255,0.8);
					background-color: rgba(0,0,0,0.2);
					padding: 4rpx 16rpx;
					border-radius: 20rpx;
				}
			}
		}
		
		.notice-btn {
			position: relative;
			
			.badge {
				position: absolute;
				top: -8rpx;
				right: -8rpx;
				font-size: 20rpx;
				background-color: #ff5722;
				color: #fff;
				min-width: 32rpx;
				height: 32rpx;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 6rpx;
			}
		}
	}
	
	/* 调试信息样式 */
	.debug-info {
		margin: 20rpx;
		padding: 10rpx;
		background-color: #f0f0f0;
		border-radius: 8rpx;
		font-size: 24rpx;
		color: #666;
	}
	
	.data-cards {
		display: flex;
		margin: -50rpx 20rpx 20rpx;
		
		.card {
			flex: 1;
			height: 160rpx;
			background-color: #fff;
			border-radius: 20rpx;
			margin: 0 10rpx;
			box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			
			.card-title {
				font-size: 24rpx;
				color: #909399;
				margin-bottom: 10rpx;
			}
			
			.card-value {
				font-size: 40rpx;
				font-weight: bold;
				color: #303133;
				margin-bottom: 10rpx;
			}
			
			.card-desc {
				font-size: 22rpx;
				color: #909399;
			}
		}
	}
	
	.section-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #303133;
		
		.more {
			font-size: 26rpx;
			color: #909399;
			font-weight: normal;
		}
	}
	
	.task-list {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
		
		.task-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 2rpx solid #f5f5f5;
			
			&:last-child {
				border-bottom: none;
			}
			
			.task-info {
				flex: 1;
				margin-right: 20rpx;
				
				.task-title {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #303133;
					margin-bottom: 10rpx;
					
					.tag {
						font-size: 20rpx;
						padding: 2rpx 12rpx;
						color: #fff;
						border-radius: 6rpx;
						margin-right: 10rpx;
					}
				}
				
				.task-desc {
					font-size: 24rpx;
					color: #909399;
				}
			}
		}
	}
	
	.grid-menu {
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 20rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
		
		.grid-item {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20rpx 0;
			
			.grid-icon {
				width: 80rpx;
				height: 80rpx;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 10rpx;
			}
			
			.grid-text {
				font-size: 24rpx;
				color: #606266;
			}
		}
	}
	
	.stats-card {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 20rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
		
		.stats-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #f5f5f5;
			
			text {
				font-size: 28rpx;
				color: #303133;
			}
		}
		
		.mock-chart {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			color: #909399;
			font-size: 28rpx;
			background-color: #f5f5f5;
			border-radius: 16rpx;
		}
	}
	
	.safe-area-bottom {
		height: calc(100rpx + env(safe-area-inset-bottom));
	}
</style> 